<template>
  <div class="box" v-loading="loading">
    <el-row :gutter="20">
      <el-col :span="8" class="left"
        ><div class="grid-content ep-bg-purple" />
        <img :src="backgroundUrl" alt="" />
      </el-col>
      <el-col :span="16" class="right"
        ><div class="grid-content ep-bg-purple" />
        <h3>{{ name }}</h3>
        <div class="qian">
          <span>LV{{ level }}</span>
          <span>听歌时长：{{ listenSongs }}min</span>
          <span>创建时间：{{ time(createTime) }}</span>
          <span>小主已经和轻音播放器度过了 {{ createDays }} 天</span>
        </div>
        <hr />
        <ul>
          <li>
            <p>0</p>
            <p>动态</p>
          </li>
          <li>
            <p>{{ follows }}</p>
            <p>关注</p>
          </li>
          <li>
            <p>0</p>
            <p>粉丝</p>
          </li>
        </ul>
        <div>
          <p>所在地区：湖南省 娄底市</p>
          <p>个人介绍：{{ signature }}</p>
        </div>
      </el-col>
    </el-row>
    <el-menu
      :default-active="defaultActive"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1" @click="defaultActive = '1'"
        >收藏的歌单</el-menu-item
      >
      <el-menu-item index="2" @click="defaultActive = '2'"
        >创建的歌单</el-menu-item
      >
      <el-menu-item index="3" @click="defaultActive = '3'"
        >创建的音乐专栏</el-menu-item
      >
    </el-menu>
    <div class="bottom-box" v-show="defaultActive == '1'">
      <el-row>
        <el-col
          v-for="UserPlaylist in UserPlaylist"
          :key="UserPlaylist"
          :span="4"
          :offset="1"
        >
          <router-link
            :to="{ path: '/itemMusic', query: { id: UserPlaylist.id } }"
          >
            <el-card :body-style="{ padding: '0px' }">
              <img :src="UserPlaylist.coverImgUrl" class="image" />
              <div style="padding: 5px">
                <span>{{ UserPlaylist.name }}</span>
              </div>
            </el-card>
          </router-link>
        </el-col>
      </el-row>
    </div>
    <div v-show="defaultActive == '2'"><el-empty :image-size="100" /></div>
    <div v-show="defaultActive == '3'"><el-empty :image-size="100" /></div>
  </div>
</template>

<script>
import { getCurrentInstance, onMounted } from "@vue/runtime-core";
import { mapState, useStore } from "vuex";
import { ElMessage } from "element-plus";
import {
  getUserDetail,
  getUserPlaylist,
} from "../../request/subCount/subCount";
export default {
  data() {
    return {
      defaultActive: "1", //当前的选中项目
      backgroundUrl:
        "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png", //用户头像
      name: "未登录", //用户姓名
      createDays: "...", //账户创建了多久
      createTime: "...", //账户创建时间
      level: "...", //账户等级
      listenSongs: "...", //听歌时长
      signature: "...", //个性签名
      follows: "...", //关注人数
      UserPlaylist: [], //用户歌单
      loading:false
    };
  },
  computed: {
    ...mapState(["User"]),
  },
  setup() {
    onMounted(async () => {
      let dataS = getCurrentInstance().data;
      dataS.loading = true
      const store = useStore();
      if (store.state.User) {
        dataS.loading = false
        ElMessage({
          message: "请先登录",
          grouping: true,
          type: "warning",
        });
      } else {
        let res = await store.dispatch(
          "getUserDetail",
          store.state.login.data.bindings[0].userId
        );
        dataS.backgroundUrl = res.data.profile.avatarUrl;
        dataS.name = res.data.profile.nickname;
        dataS.createDays = res.data.createDays;
        dataS.createTime = res.data.createTime;
        dataS.level = res.data.level;
        dataS.listenSongs = res.data.listenSongs;
        dataS.signature = res.data.profile.signature;
        dataS.follows = res.data.profile.follows;
        let UserPlaylist = await getUserPlaylist(
          store.state.login.data.bindings[0].userId
        ); //获取用户歌单
        dataS.UserPlaylist = UserPlaylist.data.playlist;
        dataS.loading = false
      }
    });
  },
  methods: {
    time: function (tt) {
      let time = new Date(tt);
      let times = time.toLocaleDateString().replace(/\//g, "-");
      return times;
    },
  },
  watch: {
    User: function (to) {
      if (!to) {
        this.loading = true
        getUserDetail(this.$store.state.login.data.bindings[0].userId)
          .then((res) => {
            this.backgroundUrl = res.data.profile.avatarUrl;
            this.name = res.data.profile.nickname;
            this.createDays = res.data.createDays;
            this.createTime = res.data.createTime;
            this.level = res.data.level;
            this.listenSongs = res.data.listenSongs;
            this.signature = res.data.profile.signature;
            this.follows = res.data.profile.follows;
            getUserPlaylist(this.$store.state.login.data.bindings[0].userId)
              .then((res) => {
                //获取用户歌单
                this.UserPlaylist = res.data.playlist;
                this.loading = false
              })
              .catch((err) => {
                console.log("获取用户歌单失败", err);
                this.loading = false
              });
          })
          .catch((err) => {
            dataS.loading = false
            ElMessage({
              message: "数据获取失败",
              grouping: true,
              type: "error",
            });
          });
      }
    },
  },
};
</script>

<style lang="less" scoped>
* {
  text-decoration: none;
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.left {
  img {
    height: 188px;
    width: 188px;
    border-radius: 50%;
    margin-left: 60px;
    box-shadow: 0px 2px 3.4px 0.6px rgba(0, 0, 0, 0.39);
  }
}
.right {
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.39);
  border-radius: 20px;
  h3 {
    margin: 10px 0;
  }
  .qian {
    font-weight: 200;
    span {
      margin: 0 10px;
      &:first-child {
        background-color: #ccc;
        padding: 2px 7px;
        border-radius: 10px;
      }
    }
  }
  hr {
    margin-top: 20px;
  }
  ul {
    li {
      list-style: none;
      float: left;
      p {
        margin: 10px 15px;
        font-size: 20px;
        font-weight: 200;
        text-align: center;
      }
    }
  }
  div {
    &:last-child {
      float: left;
      margin-left: 20px;
      font-weight: 200;
      line-height: 10px;
      width: 300px;
    }
  }
}
.el-menu {
  margin-top: 10px;
}
.bottom-box {
  margin-top: 5px;
  .bottom {
    margin-top: 13px;
    line-height: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .image {
    width: 100%;
    display: block;
  }
}
</style>